<template>
  <view class="trip-list">
    <view class="header">
      <b>费用明细</b>
    </view>
    <view class="item" v-for="(item, index) in list">


    <view class="form-one">
      <view class="amonut">订单总额</view>
      <view class="amouts">{{ item.allPrice }}元</view>
    </view>
    <view class="form-two">
      <view class="start-price">起步费</view>
      <view class="start-prices">{{ item.startPrice }}元</view>
    </view>
    <view class="form-three">
      <view class="minus-price">优惠券</view>
      <view class="minus-prices"><span style="color: #F07947">-{{ item.minusPrice }}元</span></view>
    </view>
    <view class="top"></view>
    <view class="z-num">
      <view class="num"><b>总计</b></view>
      <view class="num-price"><span style="color: #F07947 ">{{ numPrice }}元</span></view>
    </view>
    </view>
  </view>
</template>

<script>
import {orderInfoMassage} from "@/api/durian/order/orderInfo";

export default {
  data() {
    return {
      list: [],
      form: {
        id: "",
        allPrice: "",
        startPrice: "",
        minusPrice: "",
      },
      orderNo: 0,
      numPrice: 0
    };
  },
  onLoad: function (res) {
    this.orderNo = res.orderNo // 模板字面量
    console.log(this.orderNo)
    this.getOrderInfo();
  },
  methods: {
    getOrderInfo() {
      this.numPrice = 0;
      orderInfoMassage(this.orderNo).then(res => {
        this.list = res.data;
        for (let i = 0; i < this.list.length; i++) {
          this.numPrice = this.list[i].allPrice + this.list[i].startPrice - this.list[i].minusPrice;
        }
        this.numPrice = this.numPrice.toFixed(2);
      })
    },
  }
};
</script>

<style lang="scss">


.trip-list {
  width: 100%;
  height: 220px;
  background-color: #FFFFFF;
  margin-top: 20px;
  border-radius: 20px;

  .header {
    padding-top: 10px;
    font-size: 20px;
    margin-left: 20px;
    //margin-top: 40px;
  }

  .form-one {
    width: 100%;
    height: 20px;
    margin-top: 10px;

    .amonut {
      float: left;
      margin-left: 20px;
    }

    .amouts {
      font-size: 15px;
      float: right;
      margin-right: 30px;
    }
  }

  .form-two {
    width: 100%;
    height: 20px;
    margin-top: 10px;

    .start-price {
      float: left;
      margin-left: 20px;
    }

    .start-prices {
      font-size: 15px;
      float: right;
      margin-right: 30px;
    }
  }

  .form-three {
    width: 100%;
    height: 20px;
    margin-top: 15px;

    .minus-price {
      float: left;
      margin-left: 20px;
    }

    .minus-prices {
      font-size: 15px;
      float: right;
      margin-right: 30px;
    }
  }

  .top {
    width: 360px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e5e5e5;
    margin-top: 35px;
    margin-left: 15px;
  }

  .z-num {
    margin-top: 15px;

    .num {
      font-size: 20px;
      margin-left: 21px;
    }

    .num-price {
      font-size: 20px;
      float: right;
      margin-right: 30px;
      margin-top: -25px;
    }
  }

}


</style>



